<template>
	<view class="container">
		<!-- 头部 -->
		<view class="container-top">
			<view class="search-box">
				<view class="fill" :style="{height: navbarHeight + 'px'}"></view>
				<view class="title" :style="{height: titleBarHeight + 'px',display:'flex','align-items':'center'}">
					<image src="@/static/home-logo.png" mode="" style='width:280rpx;height:56rpx;margin-right:20rpx;margin-left:10rpx;'></image>
					<uv-input v-model="key" class="search_input" placeholder="请输入" :prefixIcon="searshs"  @confirm="searsh"
										prefixIconStyle="width:28rpx;height:28rpx;"></uv-input>
				</view>
			</view>
			<uv-swiper :list="map" keyName="url" circular width="686rpx" @click='goExcelBook'
				height="460rpx"></uv-swiper>
			<uv-tabs :list="items" :current="current" keyName="dictionaryName"  @click="onClickItem"
				style="position: relative;z-index: 1;background:red!important;" :itemStyle="{
				padding: '0 19rpx',
				height: '84rpx'}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)',
				fontSize: '26rpx'
			}" :activeStyle="{
			color: '#303133',
			fontWeight: 'bold',
			fontSize: '30rpx',
			transform: 'scale(1.05)'
		}"></uv-tabs>
		</view>
		<!-- 内容 -->
			<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" :up="upOption" top="540rpx" bottom="0px" :safearea="true" -->
			<mescroll-uni ref="mescrollRef" :up="upOption" top="540rpx" bottom="0px" :safearea="true"
			 @up="upCallback" @down="downCallback">
			<flow :listdata="listdata"></flow>
		</mescroll-uni>
	</view>
</template>

<script setup>
	// import MescrollUni from 'mescroll-uni';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import flot from '@/components/flow/flow.vue'
	import {
		computed,
		onMounted,
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	// import {
	// 	request
	// } from '../../util/request.ts'
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	const http = new Request();
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const urls = useGetGlobalProperties().$https;
	const url = useGetGlobalProperties().$httpUrl;
	const wxurl = useGetGlobalProperties().$httpUrlWx;
	
	const searshs = wxurl + '/search.png';
	const hots = wxurl + '/hot.png';
	const key = ref();
	const bookType = ref();
	const upOption = ref({auto: false,textNoMore: '没有更多数据了~'})
	const navbarHeight = ref(0)
	//计算刘海状态栏
	navbarHeight.value = uni.getSystemInfoSync().statusBarHeight
	//计算胶囊区域的高度
		let {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect()
	const titleBarHeight = computed(() => {
		return (top - navbarHeight.value) * 2 + height
	})
	
	const searsh = () => {
		uni.navigateTo({
			url: '/pages/searsh/searsh?keys=' + key.value
		})
	}
	const autoplay = false;
	const data = reactive({
		loginCode: '',
		});
	const mescrollInit=(mescroll)=> {
		mescroll.value = mescroll;
		console.log(mescroll.value)
	},
	onMounted(() => {
		isRegister();
		// init();
	})
	const dataForm = reactive({
		current: 0,
		dataTypeId: '',
		bookTypeId: ''
	})
	const currents = ref(1)
	const changeSwiper = (e) => {
		let bookId = topicSwiper.value[e].bookId;
		uni.navigateTo({
			url: `/pages/special/list?bookId=${bookId}`
		})
	}
	
	const changeSwiper1 = (e) => {
		let urls = map.value[e].url;
		if(urls=='专题')
		{
		let bookId = topicSwiper.value[e-1].bookId;
		
		uni.navigateTo({
			url: `/pages/special/list?bookId=${bookId}`
		})	
		}
	}
	const isRegister = async () => {
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				data.loginCode = res.code;
				console.log("code=" + res.code);
				uni.request({
					url: '/api/wxApi/user_login/isRegister',
					method: 'POST',
					data: {
						code: res.code
					},
					success: (res) => {
						uni.navigateTo({
							// url: '/pages/admin/login'
						})
					}
				})
			}
		})
	}
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const vedio = useGetGlobalProperties().$vedio;
	const search = () => {
		request('/auth/oauth2/token?grant_type=password', 'POST', option)
	}
	const options = reactive({
		username: 'admin',
		password: 'JFat0Zdc',
		scope: 'server'
	})
	const map = ref([]);
	const topicSwiper = ref([]);
	const init = async () => {
		uni.showLoading({
			title: '正在加载中',
		})
		let code = '';
		// 首页banner列表
		http.get('/homepage/getBanner?position=' + '1', {}).then(res => {
			map.value = res.data.data;
			let imageUrl = 'https://nongjiashuwu.shuzinongyue.com:8448';
			map.value.forEach(item => {
				item.carouselMapUrl = imageUrl + item.carouselMapUrl
			})
		}).catch(err => {
		})
		// 分类列表
		uni.request({
			// url: urls + '/ruralLibrary/bookDataType/list',/api/dataDictionary/queryListByCode
			url: urls + '/api/dataDictionary/queryListByCode?',
			method: 'GET',
			data:{
				code:'HOMETYPE'
			},
			success: (res) => {
				console.log('type', res.data.data);
				items.value = res.data.data;
				bookType.value =items.value[0].dictionaryCode
				this.getHomeBookList()
				// if (initFlag.value) { // 页面已经初始化，则刷新页面
				// 	items.value = []
				// 	mescroll.resetUpScroll()
				// }
			}
		})
		uni.setStorageSync('book', book)
		uni.setStorageSync('audio', audio)
		uni.setStorageSync('journal', journal)
		uni.setStorageSync('vedio', vedio)
		setTimeout(function() {
			uni.hideLoading();
		}, 900);
	}

	const toVideoDetail = () => {
		uni.navigateTo({
			url: '/pages/index/videoDetails/videoDetails'
		})
	}
	const toaudioDetail = () => {
		uni.navigateTo({
			url: '/pages/index/audioDetails/audioDetails'
		})
	}
	const toBookDetail = () => {
		uni.navigateTo({
			url: '/pages/index/bookDetail/bookDetail'
		})
	}
	const toCategory = () => {
		uni.navigateTo({
			url: '/pages/category/category'
		})
	}

	onLoad((option) => {
		let params='';
		if (option.hasOwnProperty('scene')) {
			 params = decodeURIComponent(option.scene)
			
			if (params.includes('&')) {
				let array = params.split('&')
				array.forEach(a => {
					let arr = a.split('=')
					option[arr[0]] = arr[1]
				})
			} else {
				let array = params.split('=')
				option[array[0]] = array[1]
			}
			delete option.scene
			
		}
		console.log(params, '------')
		// console.log(option, '------')
		let r = uni.getStorageSync('userInfo');
		if (r == null || r.openId == null) {
			uni.login({
				provider: 'weixin',
				onlyAuthorize: true,
				success: res => {
					let code = res.code;
					console.log(code, '--##----')
					uni.request({
						// url: 'https://weixin.shuzinongyue.com:8942/userInfo/wxlogin',
						// url: 'http://61.163.243.13:8944/userInfo/wxlogin',
						url: 'https://wechat.shuzinongyue.com:8922/userInfo/wxlogin',
						method: 'post',
						data: {
							code: code,
							location: params
						},
						success: (res) => {
							uni.setStorageSync('userInfo', res.data.data);
						}
					})
				}
			})
		}
		init()
	})
	onShow(()=>{
		// if (items.value.length > 1) { 
		// 	listdata.value = []
		// 	mescroll.resetUpScroll()
		// }
	})
	const current = ref(0);
	const typeData = ref();
	const mescroll = ref()
	const items = ref([
	]);
	const listdata = ref([
	 
	]); 
	const initFlag = ref(false);
	const flagItems = ref([])
	// 下拉刷新
	const downCallback=(mescroll)=>{
		if(mescroll.optUp.use){
			mescroll.resetUpScroll()
		}else{
			setTimeout(()=>{
				mescroll.endSuccess();
			}, 500)
		}
	}
	// 上滑加载
	// 根据tabs切换查询分类列表
	const getHomeBookList = ()=>{
		console.log(bookType.value)
		uni.request({
			url: urls + '/homepage/getBookByType',
			method: 'POST',
			data: {
				bookType:bookType.value,
				pageNum: 1,
				pageSize: 10
			},
			success: (res) => {
					if(currents.value == 1){
						listdata.value = res.data.data.records;
					}else{
						for (let i = 0; i < res.data.data.records.length; i++) {
							listdata.value.push(res.data.data.records[i]);
						}
					}
			}
		})
	}
	const upCallback=(page)=>{
		console.log('下拉了',page)
		const params = {
			bookType:bookType.value,
			pageNum: page.num,
			pageSize: page.size
		}
		uni.request({
			url: urls + '/homepage/getBookByType',
			method: 'POST',
			data: params,
			success: (res) => {
				initFlag.value = true
				flagItems.value = res.data.data.records;
				page.endBySize(flagItems.value.length, res.data.data.total);
				//设置列表数据
				for (let annItem of flagItems.value) {
					listdata.value.push(annItem)
				}
				if (page.num == 1) {
					listdata.value = []; //如果是第一页需手动制空列表
					listdata.value = listdata.value.concat(flagItems.value); //追加新数据
				}
					// if(currents.value == 1){
					// 	listdata.value = res.data.data.records;
					// }else{
					// 	for (let i = 0; i < res.data.data.records.length; i++) {
					// 		listdata.value.push(res.data.data.records[i]);
					// 	}
					// }
			}
		})
	};
	// 切换类型
	const onClickItem = (e) => {
		console.log("e", e)
		if (current.value !== e.currentIndex) {
			current.value = e.index;
			currents.value = 1;
			let users = uni.getStorageSync('userInfo');
			// 分类列表
			bookType.value = e.dictionaryCode
			getHomeBookList()
			// listdata.value = []
			// mescroll.resetUpScroll()
		}
	};
	// 跳转导出页面
	const goExcelBook = () => {
		uni.navigateTo({
			url: '/pages/excelBook/excelBook'
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		width:100%;
		height: 100vh;
		margin-top: 0%;
		background: linear-gradient(180deg, #21BAD4 0%, #259BFD 5%, #71ACFC 10%, #F7FAFF 20%);
		font-size: 20px;
		// line-height: 24px;
		font-family: my-font;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.container-top{
		width: 100%;
		min-height: 520rpx;
		.search-box{
			width:73%;
			height:180rpx;
			position:absolute;
			top:0;
			left:0;
			z-index:100;
		}
	}
</style>
<style lang="scss">
	.container{
		.uv-tabs__wrapper__nav {
			dispaly:flex;
			justify-content: space-between!important;
		}
		.uv-swiper__wrapper__item, .uv-swiper__wrapper {
			height:480rpx!important;
		}
		.uv-swiper__wrapper__item__wrapper__image {
			height:100%!important;
		}
	}
	.search-box {
		.uv-input{
			width:100rpx!important;
			line-hegiht:50rpx!important;
			background:#ffffff!important;
			border:0!important;
			border-radius: 40rpx!important;
			box-sizing: border-box;
			padding:6rpx 12rpx!important;
			input{
				font-size:22rpx!important;
				color:#333333;
			}
		}
	}
	
	::-webkit-scrollbar{
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	}
</style>